<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2-org-tree 基本用法</title>
<script src="./js/vue.js"></script>
<script src="./org_tree/org_tree.js"></script>
<link rel="stylesheet" href="./org_tree/org_tree.css">
<style>
.org-tree-node-label .org-tree-node-label-inner {
  height: 36px !important;
  padding: 0 !important;
  line-height: 36px;
}
.span-text {
  width: 100%;
  height: 100%;
  /* padding: 0; */
  padding: 0 6px;
  display: block;
  border-radius: 3px;
  color: #FFFFFF;
}
.horizontal .org-tree-node-label {
  width: 190px !important;
}

</style>
</head>
<body>
	<!-- https://blog.csdn.net/weixin_47941995/article/details/126617885 -->
	<!-- https://zhuanlan.zhihu.com/p/117300250 -->
	<div id="app">
		<vue2-org-tree :data="treeData" :render-content="renderContent" @on-node-click="clickNode" :horizontal="false"></vue2-org-tree>
		<p v-show="isShow">{{info}}</p>
	</div>

</body>
<script>
// 阻止 Vue 在启动时生成生产提示
Vue.config.productionTip = false;
const data = {
	"name": "主体",
	"status": 1,
	"describe": "镜像ID：aido-10001100.tar，版本号：v.1.1",
	"imageUrl": "http://10.32.145.121:8080/bomc/data/img/1.png",
	"children": [
		{
			"name": "人事部",
			"status": 0,
			"describe": "业务需求：开发测试中",
			"imageUrl": "http://10.32.145.121:8080/bomc/data/img/2.png",
			"children": null,
		},
		{
			"name": "财务部",
			"status": 0,
			"describe": "业务需求：未关联业务需求单！",
			"imageUrl": "http://10.32.145.121:8080/bomc/data/img/1.png",
			"children": [
				{
					"name": "财务室",
					"status": -1,
					"describe": "开发需求：未开始",
					"imageUrl": "http://10.32.145.121:8080/bomc/data/img/4.png",
					"children": null,
				},
				{
					"name": "仓库",
					"status": -1,
					"describe": "开发需求：未开始",
					"imageUrl": "http://10.32.145.121:8080/bomc/data/img/4.png",
					"children": null,
				},
			]
		}
	]
}
let vm = new Vue({
	el: '#app',
	data: {
		treeData: {},
		isShow: true,
		info: '',
	},
	mounted() {
		this.treeData = data
	},
	methods: {
		renderContent: function name(createElement, data) {
			const elHtml = createElement('span', {
				attrs: {
					'class': 'span-text',
					'style': data.status === 1 ? 'background-color: #d00d4b;' : (data.status === 0 ? 'background-color: green;' : (data.status === -1 ? 'background-color: #00aaff;' : 'background-color: red;'))
				}
			}, data.name)
			return elHtml
		},
		clickNode(e, node) {
			console.log(node);
			this.isShow = true;
			this.info = "点击了：" + node.name;
		}
	},
})


</script>
</html>